<template>
    <div class="block">
      <h3>合作方信息</h3>
      <el-form :model="basicInfoForm" :rules="rules" ref="basicInfoFormRef">
        <!-- 合作方信息输入 -->
        <el-form-item label="合作方名称" prop="Companyname">
          <el-input v-model="basicInfoForm.Companyname"></el-input>
        </el-form-item>
        <el-form-item label="合作方联系人" prop="contactName">
          <el-input v-model="basicInfoForm.contactName"></el-input>
        </el-form-item>
        <el-form-item label="合作方电话" prop="phone">
          <el-input type="number" v-model="basicInfoForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="合作方类型" prop="ty">
          <el-select v-model="basicInfoForm.ty" placeholder="请选择合作方类型">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <h2>合作条款</h2>
        <el-form-item label="合作期限" prop="value1">
          <el-date-picker
            v-model="value1"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item>
  
        <!-- 提交按钮 -->
        <el-form-item id="box">
          <el-button :plain="true" type="primary" @click="submitForm" id="he">提交</el-button>
          <el-button v-if="tableData.length > 0" @click="toggleDrawer">查看表格</el-button>
        </el-form-item>
      </el-form>
  
      <el-drawer
        title="合作方信息"
        :visible.sync="drawer"
        size="50%"
        id="eldrawer">
        <el-table :data="tableData" class="eltabl">
          <el-table-column prop="Companyname" label="合作方名称" width="180">
          </el-table-column>
          <el-table-column prop="contactName" label="合作方联系人" width="180">
          </el-table-column>
          <el-table-column prop="phone" label="合作方电话">
          </el-table-column>
          <el-table-column prop="ty" label="合作方类型">
          </el-table-column>
          <el-table-column prop="date" label="合作期限" width="180">
          </el-table-column>
        </el-table>
      </el-drawer>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        checkboxIsChecked: false,
        drawer: false,
        basicInfoForm: {
          Companyname: "",
          contactName: "",
          phone: "",
          ty: "",
        },
        tableData: [],
        value1: [],
        rules: {
          Companyname: [
            { required: true, message: "合作方名称不能为空", trigger: "blur" },
          ],
          contactName: [
            { required: true, message: "联系人姓名不能为空", trigger: "blur" },
          ],
          phone: [
            { required: true, message: "电话号码不能为空", trigger: "blur" },
            {
              validator: (rule, value, callback) => {
                if (value && !/^\d{11}$/.test(value)) {
                  callback(new Error("电话号码必须为11位数字"));
                } else {
                  callback();
                }
              },
              trigger: "blur",
            },
          ],
          ty: [
            { required: true, message: "合作方类型不能为空", trigger: "change" },
          ],
        },
        pickerOptions: {
          shortcuts: [
            {
              text: "最近一周",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit("pick", [start, end]);
              },
            },
            {
              text: "最近一个月",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                picker.$emit("pick", [start, end]);
              },
            },
            {
              text: "最近三个月",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                picker.$emit("pick", [start, end]);
              },
            },
          ],
        },
        options: [
          { value: "工作服供应商", label: "工作服供应商" },
          { value: "殡葬用品供应商", label: "殡葬用品供应商" },
          { value: "骨灰盒供应商", label: "骨灰盒供应商" },
          { value: "物业管理供应商（主要提供清洁）", label: "物业管理供应商（主要提供清洁）" },
        ],
      };
    },
  
    methods: {
      submitForm() {
        this.$refs.basicInfoFormRef.validate((valid) => {
          if (valid) {
            // 验证通过，准备提交
            // 将表单数据填充到表格数据中
            this.tableData.push({
              Companyname: this.basicInfoForm.Companyname,
              contactName: this.basicInfoForm.contactName,
              phone: this.basicInfoForm.phone,
              ty: this.basicInfoForm.ty,
              date: this.value1
                ? `${this.formatDate(this.value1[0])} 至 ${this.formatDate(this.value1[1])}`
                : "",
            });
            // 提交成功后清空表单
            this.resetForm();
            this.drawer = true; // 打开抽屉
            this.$message({
              message: "信息提交成功!",
              type: "success",
            });
          } else {
            console.error("表单验证失败!");
            return false;
          }
        });
      },
      resetForm() {
        // 重置表单数据
        this.basicInfoForm = {
          Companyname: "",
          contactName: "",
          phone: "",
          ty: "",
        };
        // 重置日期选择器
        this.value1 = [];
        // 如果需要，还可以重置其他相关状态或数据
      },
      toggleDrawer() {
        this.drawer = !this.drawer;
      },
      formatDate(date) {
        const year = date.getFullYear();
        const month = (date.getMonth() + 1).toString().padStart(2, "0");
        const day = date.getDate().toString().padStart(2, "0");
        return `${year}-${month}-${day}`;
      },
    },
  };
  </script>
  
  <style scoped>
  .block {
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    border: 1px solid #ebeef5;
    border-radius: 4px;
    background-color: #ffffff;
  }
  
  .el-form-item {
    margin-bottom: 20px;
  }
  
  #box {
    width: 100%;
    /* height: 40px; */
    display: flex;
    justify-content: space-between;
  }
  
  #he {
    margin-right: 5vw;
  }
  
  .eltabl {
    width: 100%;
    /* height: 100%; */
  }
  
  #eldrawer .el-drawer__body {
    padding: 0;
    overflow-y: auto; /* 允许滚动，如果内容超出抽屉高度 */
}
  
  #eldrawer .el-table {
    border: none;
  }
  #eldrawer {
  min-height: 300px; /* 根据需要调整 */
}
  </style>